import React, { Component, Fragment } from 'react';
import { Alert } from 'react-native';
import { InputItem, List } from 'antd-mobile';
import { createForm } from 'rc-form';
import _ from 'lodash';
import Button from '../../../components/Button';

export default createForm()(({ form, onSubmit, submitText }) => {
  const {
    getFieldProps,
    getFieldsError,
    getFieldError,
    validateFields,
    getFieldsValue
  } = form;
  const submitHandle = () => {
    validateFields({ force: true }, error => {
      if (!error) {
        onSubmit(getFieldsValue());
      } else {
        const errText = _.map(error, ({ value }) => value);
      }
    });
  };
  return (
    <Fragment>
      <List>
        <InputItem
          {...getFieldProps('username', {
            rules: [{ required: true, message: '请输入用户名' }]
          })}
          clear
          error={!!getFieldError('username')}
          onErrorClick={() => {
            Alert.alert('error', getFieldError('username').join('、'));
          }}
          placeholder="请输入用户名"
        >
          用户名
        </InputItem>
        <InputItem
          {...getFieldProps('password', {
            rules: [{ required: true, message: '请输入密码' }]
          })}
          error={!!getFieldError('password')}
          onErrorClick={() => {
            Alert.alert('error', getFieldError('password').join('、'));
          }}
          placeholder="请输入密码"
          type="password"
        >
          密码
        </InputItem>
      </List>
      <Button
        title={submitText}
        type="primary"
        onPress={submitHandle}
        style={{ marginTop: 10 }}
      />
    </Fragment>
  );
});
